<template>
  <page-frame>
    <div class="consultingComplaint">
      <div class="toptitle">
        <div class="left">问题上报</div>
        <div class="right">
          <div class="btns">
            <el-button @click="addComplaints" class="lightGreenBtn">新增事项</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="fileId" @change="selectItem" @clear = "clearItem" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item"   v-show="fileId=='1'">
                <el-input v-model="queryData.memberName" @keyup.enter.native="query" placeholder="请输入提出人姓名" style="width:81%!important;">
                </el-input>
              </div>
              <div class="input-item"   v-show="fileId=='2'">
                <el-select v-model="queryData.status" @change="query" placeholder="请选择处理状态" style="width:81%!important;">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="input-item"   v-show="fileId=='3'">
                <el-select v-model="queryData.typeId" @change="query" placeholder="请选择问题类型" style="width:81%!important;">
                  <el-option
                    v-for="item in typeOptions"
                    :label="item.typeName"
                    :value="item.woTypeId">
                  </el-option>
                </el-select>
              </div>
              <div class="input-item"   v-show="fileId=='4'">
                <el-input v-model="queryData.dutyPerson" @keyup.enter.native="query" placeholder="请输入指派责任人" style="width:81%!important;">
                </el-input>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="btns" style=" width:70%;">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="detail"
            style="width: 100%">
            <el-table-column
              prop="createTime"
              label="提出时间"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="proposer"
              label="提出人"
            >
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="问题类型"
            >
            </el-table-column>
            <el-table-column
              prop="createUser"
              label="记录人"
            >
            </el-table-column>
            <el-table-column
              prop="dutyPerson"
              label="指派责任人"
            >
            </el-table-column>
            <el-table-column
              prop="statusName"
              width="100"
              label="处理状态"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="120"
            >
              <template scope="scope">
                <el-button v-if="scope.row.status==0" type="text" size="small" @click.stop="consultationRecords(scope.row)">记录</el-button>
                <el-button type="text" size="small" @click.stop="checkDetail(scope.row)">回访</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import consultingComplaintApi from '../../service/serCenter/consultingComplaintApi';
  import commonApi from '../../service/member/commonApi';
  export default {
    methods: {
      init(){
        this.loadTableData(1);
        this.getAllMember();
        this.getAllProTypes();
      },
      /**
       * 分页查询
       */
      loadTableData(pageNum){
        let self = this;
        consultingComplaintApi.getTableData(10,pageNum,self.queryData).then(
          (response)=>{
            if(response.data.data==''){//没有数据时
              //将旧的数据清空
              self.tableData = [];
              self.total = 0;
            }else{//有数据
              self.tableData = response.data.data.list;
              self.total = response.data.data.total;
              for(let i=0;i<self.tableData.length;i++){
                //转换状态
                if(self.tableData[i].status==0){
                  self.tableData[i].statusName = '处理中';
                }else if(self.tableData[i].status==1){
                  self.tableData[i].statusName = '已完成';
                }
              }
            }
          }
        );
      },
      /**
       * 改变项目名称时清空queryData中的数据
       */
      selectItem(){
        this.queryData.dutyPersion='';
        this.queryData.memberName='';
        this.queryData.status=null;
        this.queryData.typeId=null;
      },
      /**
       * 搜索
       */
      query(){
        this.loadTableData(1);
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 新增投诉
       */
      addComplaints(){
        this.$router.push({name: 'consultingNewComplaint',params:{way:1,row:{}}});
      },
      /**
       * 咨询记录
       */
      consultationRecords(rowObg){
        this.$router.push({name: 'consultingFollowComplaint',params:{status:rowObg.status,woId:rowObg.woId}});
      },
      /**
       * 双击查看详情
       */
      detail(rowObj){
//        this.$router.push({name:'consultingNewComplaint',params:{way:0,row:rowObj}});
      },
      /**
       * 查看(操作)
       */
      checkDetail(rowObj){
        this.$router.push({name:'consultingDetail',params:{woId:rowObj.woId}});
      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        console.debug(cb);
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            cb(results);
        console.debug(results);
      }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
//        console.log(item);
        this.memberInfor = item;
        this.emId = item.emId;
      },
      /**
       * 获得所有机构成员
       */
      getAllMember(){
        let self = this;
        commonApi.getAllEmp().then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            self.members[i].value = self.members[i].emName;
          };
        })
      },
      /**
       * 获取所有问题类型
       */
      getAllProTypes(){
        let self  = this;
        consultingComplaintApi.getProTypes().then(
          (response)=>{
            self.typeOptions = response.data.data;
          }
        );
      },
      /**
       * 分页相关
       */
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.loadTableData(this.currentPage);
      },
    },
    mounted: function () {
      this.init();
    },
    data () {
      return {
        fileId:1,
        memberName:'',
        memberInfor:{},
        members:[],
        emId:null,
        row:null,
        queryData:{
          dutyPersion:'',
          memberName:'',
          status:null,
          typeId:null,
        },
        fileList:[{
          fileId: 1,
          fileName: "提出人"
        },{
          fileId: 2,
          fileName: "处理状态",
        },{
          fileId: 3,
          fileName: "问题类型",
        },{
          fileId: 4,
          fileName: "指派责任人",
        }],
        statusOptions:[{
          value: 0,
          label: '处理中'
        },{
          value: 1,
          label: '已完成'
        }],
        typeOptions:[],
        tableData: [],
        currentPage:1,
        total:0,
      }
    },
  }
</script>
<style>

  .consultingComplaint .input .btns{
    margin-top:0;
  }
  .consultingComplaint .el-input{
    width: 80%;
  }
  .consultingComplaint .input input{
    display: inline-block;
  }
  .consultingComplaint .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .consultingComplaint .el-select {
    display: block;
    position: relative;
  }
</style>
